<template>
  <section>
    <div v-if="newWarehouse">
      <span>当前部门未创建仓库，点击按钮新建。</span>
      <el-button size="mini" type="primary" @click="addBtn">+</el-button>
    </div>
    <el-form label-width="80px" size="mini" v-if="currWarehouse"  style="width: 600px;margin-top: 10px;border: 1px solid #eee;border-radius: 5px;padding: 5%">
      <el-form-item label="名称">
        <el-input size="mini" v-model="currWarehouse.name" v-if="edit"/>
        <span v-else>{{currWarehouse.name}}</span>
      </el-form-item>
      <el-form-item label="编码">
        <el-input size="mini" v-model="currWarehouse.code" v-if="edit"/>
        <span v-else>{{currWarehouse.code}}</span>
      </el-form-item>
      <el-form-item label="地点">
        <el-input size="mini" v-model="currWarehouse.location" v-if="edit"/>
        <span v-else>{{currWarehouse.location}}</span>
      </el-form-item>
      <el-form-item label="库存类型">
        <el-switch v-model="currWarehouse.virtual" :disabled="!edit" active-color="#13ce66" inactive-color="#ff4949" active-text="虚拟" inactive-text="实物"/>
      </el-form-item>
      <el-form-item label="">
        <el-button v-if="edit" size="mini" :type="currWarehouse.id?'success':'primary'" @click="confirmBtn(currWarehouse)">{{currWarehouse.id?'保存':'新建'}}</el-button>
        <el-button v-if="currWarehouse.id"size="mini" :type="currWarehouse.id?'primary':''" @click="edit = !edit">{{edit?'取消':'编辑'}}</el-button>
        <el-button v-if="newWarehouse" size="mini" @click="currWarehouse=null">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "warehouse",
    props:['warehouse'],
    data(){
      return{
        currWarehouse:null,
        newWarehouse:false,
        edit:false
      }
    },
    created(){
      console.log('warehouse-----------',this.warehouse)
      if(this.warehouse.id){
        this.currWarehouse=this.warehouse
        this.newWarehouse=false
        this.edit=false
      }else {
        this.newWarehouse=true
      }
      // this.getWarehouseByDepartment()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getWarehouse(){
        this.fetch({name:"getWarehouse",data:{departmentId:this.department.id}})
          .then(res=>{
            console.log(res)
            if(res === ''){
              console.log('是null了----')
              this.newWarehouse=true
            }else {
              this.currWarehouse=res
              this.newWarehouse=false
              this.edit=false
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addBtn(){
        this.currWarehouse={name:'',code:'',departmentId:this.department.id,virtual:false,location:''}
        this.edit=true
      },
      confirmBtn(e){
        console.log('确定按钮---------',e)
        if(e.id){
          this.updateWarehouse(e)
        }else {
          this.createWarehouse(e)
        }
      },
      createWarehouse(data){
        this.fetch({name:"createWarehouse",data})
          .then(res=>{
            console.log('新建的仓库-------',res)
            this.$message({type:'success',message:'新建成功！'})
            this.edit=false
            this.$emit('confirm',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateWarehouse(data){
        this.fetch({name:"updateWarehouse",data})
          .then(res=>{
            console.log('更新后的---------',res)
            this.$message({type:'success',message:'更新成功！'})
            this.edit=false
            this.newWarehouse=false
            // this.getWarehouseByDepartment()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
